<template>
  <div class="step3 devform">
    <div class="devform-title">案件基本信息</div>
    <el-form
      label-width="180px"
      :model="formline"
      class="dev-form"
      :rules="rules"
      ref="formline"
    >
      <el-form-item label="收案日期" class="w2 float-r" prop="receiptDate">
        <el-date-picker
          v-model="formline.receiptDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="案件来源" class="w2" prop="caseSource">
        <el-select v-model="formline.caseSource" placeholder="请选择">
          <!-- <el-option-group
            v-for="group in dict.type.case_source2"
            :key="group.value"
            :label="group.label"
          > -->
          <el-option
            v-for="item in dict.type.case_source2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
          <!-- </el-option-group> -->
        </el-select>
      </el-form-item>
      <el-form-item label="所属分所" prop="belongOrgId">
        <el-select
          v-model="formline.belongOrgId"
          placeholder="请选择"
          class="maxWidth"
        >
          <el-option
            v-for="item in belongOrg"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="案件编号" prop="caseName">
        <el-input
          class="maxWidth"
          v-model="formline.caseNo"
          placeholder="案件编号"
        ></el-input>
      </el-form-item>
      <el-form-item label="案件名称" prop="caseName">
        <el-input
          class="maxWidth"
          v-model="formline.caseName"
          placeholder="请输入案件名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="案件类别">
        <template>
          {{ param.categoryName || formline.categoryName }} >>
          {{ param.subCategoryName || formline.subCategoryName }}
          {{
            param.thirdCategoryName || formline.thirdCategoryName
              ? ">>" + param.thirdCategoryName || formline.thirdCategoryName
              : ""
          }}
        </template>
      </el-form-item>
      <el-form-item label="案由" prop="caseCause">
        <el-input v-model="formline.caseCause" class="maxWidth"></el-input>
      </el-form-item>
      <el-form-item label="客户" prop="customerName">
        {{ param.customerName || formline.customerName }}
      </el-form-item>
      <!-- <el-form-item label="委托人" prop="agent">
        <el-input v-model="formline.agent" class="maxWidth">
          <el-button slot="append" @click="onchose('customerModalVue')">
            选择</el-button
          >
        </el-input>
      </el-form-item> -->
      <div class="devform-title">案件当事人</div>
      <el-form-item class="nopadd" label-width="180px">
        <div slot="label">
          <span style="color: red">*</span>
          申请人
        </div>
        <div
          class="col"
          v-for="(item, index) of formline.partiesInfo.clientParties"
          :key="index + 'wt'"
        >
          <el-select
            v-model="formline.partiesInfo.clientParties[index].type"
            placeholder="请选择"
            class="maxWidth"
          >
            <el-option-group
              v-for="group in dict.type.case_source"
              :key="group.value"
              :label="group.label"
            >
              <el-option
                v-for="item in dict.type[group.value]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-option-group>
          </el-select>

          <el-input
            v-model.trim="formline.partiesInfo.clientParties[index].agentName"
            class="m30"
            placeholder="请输入申请人名称"
          ></el-input>
          <el-input
            v-model="formline.partiesInfo.clientParties[index].mobile"
            class="m30"
            :class="
              iserr(formline.partiesInfo.clientParties[index].mobile)
                ? 'error-phone'
                : ''
            "
            placeholder="请输入联系方式"
          ></el-input>
          <el-input
            v-model="formline.partiesInfo.clientParties[index].remark"
            class="m30"
            placeholder="备注"
          ></el-input>
          <el-button
            @click="ondel(index, 'clientParties')"
            type="text"
            style="margin-left: 10px; margin-right: 10px"
            >删除
          </el-button>
        </div>
        <el-button icon="el-icon-plus" size="mini" @click="onadd(1)"
          >增加
        </el-button>
      </el-form-item>
      <el-form-item class="nopadd" label-width="180px">
        <div slot="label">
          <span style="color: red">*</span>
          对方当事人
        </div>
        <div
          class="col"
          v-for="(item, index) of formline.partiesInfo.targetParties"
          :key="index + 'df'"
        >
          <el-select
            v-model="formline.partiesInfo.targetParties[index].type"
            placeholder="请选择"
            class="maxWidth"
          >
            <el-option-group
              v-for="group in dict.type.case_source"
              :key="group.value"
              :label="group.label"
            >
              <el-option
                v-for="item in dict.type[group.value]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-option-group>
          </el-select>

          <el-input
            v-model.trim="formline.partiesInfo.targetParties[index].agentName"
            class="m30"
            placeholder="请输入当事人名称"
          ></el-input>
          <el-input
            v-model="formline.partiesInfo.targetParties[index].mobile"
            class="m30"
            :class="
              iserr(formline.partiesInfo.targetParties[index].mobile)
                ? 'error-phone'
                : ''
            "
            placeholder="请输入联系方式"
          ></el-input>
          <el-input
            v-model="formline.partiesInfo.targetParties[index].remark"
            class="m30"
            placeholder="备注"
          ></el-input>
          <el-button
            @click="ondel(index, 'targetParties')"
            type="text"
            style="margin-left: 10px; margin-right: 10px"
            >删除
          </el-button>
        </div>
        <el-button icon="el-icon-plus" size="mini" @click="onadd(2)"
          >增加
        </el-button>
      </el-form-item>
      <el-form-item label="其他当事人" class="nopadd" label-width="180px">
        <div
          class="col"
          v-for="(item, index) of formline.partiesInfo.otherParties"
          :key="index + 'qt'"
        >
          <el-select
            v-model="formline.partiesInfo.otherParties[index].type"
            placeholder="请选择"
          >
            <el-option-group
              v-for="group in dict.type.case_source"
              :key="group.value"
              :label="group.label"
            >
              <el-option
                v-for="item in dict.type[group.value]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-option-group>
          </el-select>

          <el-input
            v-model="formline.partiesInfo.otherParties[index].agentName"
            class="m30"
            placeholder="请输入当事人名称"
          ></el-input>
          <el-input
            v-model="formline.partiesInfo.otherParties[index].mobile"
            class="m30"
            :class="
              iserr(formline.partiesInfo.otherParties[index].mobile)
                ? 'error-phone'
                : ''
            "
            placeholder="请输入联系方式"
          ></el-input>
          <el-input
            v-model="formline.partiesInfo.otherParties[index].remark"
            class="m30"
            placeholder="备注"
          ></el-input>
          <el-button
            @click="ondel(index, 'otherParties')"
            type="text"
            style="margin-left: 10px; margin-right: 10px"
            >删除
          </el-button>
        </div>
        <el-button icon="el-icon-plus" size="mini" @click="onadd(3)"
          >增加
        </el-button>
      </el-form-item>
      <template
        v-if="
          param.categoryId == 'sys_carage_type_2' ||
          formline.categoryId == 'sys_carage_type_2'
        "
      >
        <el-form-item label="被告人（犯罪嫌疑人）" prop="defendant" class="w2">
          <el-input v-model="formline.defendant" class="maxWidth"></el-input>
        </el-form-item>
        <el-form-item
          label="委托人与当事人关系"
          prop="mandatorRelationship"
          class="w2"
        >
          <el-input
            v-model="formline.mandatorRelationship"
            class="maxWidth"
          ></el-input>
        </el-form-item>
      </template>
      <!-- suit==1诉讼类型 -->
      <template
        v-if="
          (param.categoryId &&
            ![
              'sys_carage_type_4',
              'sys_carage_type_6',
              'sys_carage_type_11',
            ].includes(param.categoryId)) ||
          (formline.categoryId &&
            ![
              'sys_carage_type_4',
              'sys_carage_type_6',
              'sys_carage_type_11',
            ].includes(formline.categoryId))
        "
      >
        <el-form-item
          label="代理程序"
          prop="proxyProcedure"
        >
          <el-input v-model="formline.agentProgram" type="textarea" maxlength="300"></el-input>
          <!-- <el-checkbox-group
            v-model="formline.suitInfo.proxyProcedure"
            size="small"
            class="maxWidth"
          >
            <el-checkbox
              :label="item.value"
              v-for="(item, index) of dict.type[proxyProcedurearry]"
              :key="index + 'agrnt'"
              >{{ item.label }}
            </el-checkbox>
          </el-checkbox-group> -->
        </el-form-item>
        <el-form-item
          label="委托代理权限"
          prop="proxyAgentPermissions"
          v-if="proxyAgentPermissionsarray"
        >
          <el-checkbox-group
            v-model="formline.suitInfo.proxyAgentPermissions"
            size="small"
            class="maxWidth"
          >
            <el-checkbox
              :label="item.value"
              v-for="(item, index) of dict.type[proxyAgentPermissionsarray]"
              :key="index + 'agrnt'"
              >{{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="受理机构" prop="acceptOrgName">
          <el-input
            v-model="formline.suitInfo.acceptOrgName"
            class="maxWidth"
          ></el-input>
          <!-- <el-select
            v-model="formline.suitInfo.acceptOrgId"
            filterable
            class="maxWidth"
            placeholder="选择或填写受理机构"
          >
            <el-option
              v-for="item in dict.type.sys_accept_org_name"
              :key="item.value + 'org'"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
        </el-form-item>
        <!-- <el-form-item label="受理机构案号" prop="acceptOrgNo">
          <el-input
            v-model="formline.suitInfo.acceptOrgNo"
            class="maxWidth"
          ></el-input>
        </el-form-item>
        <el-form-item label="开庭时间" prop="courtSessionTime">
          <el-date-picker
            class="maxWidth"
            v-model="formline.suitInfo.courtSessionTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="审理人员">
          <el-input
            v-model="formline.suitInfo.adjudicator"
            class="maxWidth"
          ></el-input>
        </el-form-item>
        <el-form-item label="羁押场所" prop="detainLocation">
          <el-input
            v-model="formline.suitInfo.detainLocation"
            class="maxWidth"
          ></el-input>
        </el-form-item> -->
      </template>
      <template
        v-else-if="
          param.categoryId == 'sys_carage_type_4' ||
          formline.categoryId == 'sys_carage_type_4'
        "
      >
        <el-form-item
          label="顾问开始时间"
          prop="suitInfo.consultantStartTime"
          class="w2"
        >
          <el-date-picker
            class="maxWidth"
            v-model="formline.suitInfo.consultantStartTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="顾问结束时间"
          prop="suitInfo.consultantEndTime"
          class="w2"
        >
          <el-date-picker
            class="maxWidth"
            v-model="formline.suitInfo.consultantEndTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="顾问等级" prop="consultantGrade">
          <el-select
            v-model="formline.suitInfo.consultantGrade"
            placeholder="请选择"
            class="maxWidth"
          >
            <el-option
              v-for="item in dict.type.sys_consultant_grade"
              :key="item.value + 'consul'"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </template>
      <el-form-item label="案情简介" prop="summary">
        <el-input
          v-model="formline.summary"
          type="textarea"
          class="maxWidth"
        ></el-input>
      </el-form-item>
      <el-form-item label="案件备注" prop="note">
        <el-input
          v-model="formline.note"
          type="textarea"
          class="maxWidth"
        ></el-input>
      </el-form-item>

      <div class="devform-title">案件费用信息</div>
      <el-form-item
        label="标的额（元）"
        class="w2 float-r"
        prop="subjectAmount"
      >
        <el-input-number
          v-model="formline.costInfo.subjectAmount"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="标的说明：" class="w2" prop="subjectDescription">
        <el-input v-model="formline.costInfo.subjectDescription"></el-input>
      </el-form-item>
      <!-- <el-form-item label="标的额证明文件" label-width="180px">
        <div class="type2-title left">
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            multiple
            :show-file-list="false"
            :on-success="successubjectAttachments"
            :headers="headers"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </div>
        <el-table
          :data="formline.costInfo.subjectAttachments"
          style="width: 100%"
          border
          class="primary-table"
        >
          <el-table-column prop="filename" label="文档" align="center">
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="
                  formline.costInfo.subjectAttachments[scope.$index].remark
                "
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="size" label="大小" align="center">
            <template slot-scope="scope">
              <span>{{
                formline.costInfo.subjectAttachments[scope.$index].size
              }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item> -->
      <el-form-item label="收费方式" class="w2" prop="paymentType">
        <el-select v-model="formline.costInfo.paymentType" placeholder="请选择">
          <el-option
            v-for="(item, index) of dict.type.payment_type"
            :key="index + 'g'"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="差旅费（元）" class="w2" prop="travelCosts">
        <el-input-number
          v-model="formline.costInfo.travelCosts"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="收费金额" class="w2" prop="fixedCosts">
        <el-input v-model="formline.costInfo.fixedCosts"></el-input>
      </el-form-item>
      <!-- <el-form-item
        label="固定费用预计到款日期"
        class="w2"
        prop="estimatedReceiptDate"
      >
        <el-date-picker
          v-model="formline.costInfo.estimatedReceiptDate"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item> -->
      <el-form-item label="收费备注" prop="costsRemark">
        <el-input v-model="formline.costInfo.costsRemark"></el-input>
      </el-form-item>
      <div class="devform-title">案件人员信息</div>
      <el-form-item label="承办人员" prop="handlers">
        <div class="type2-title left">
          <el-button
            icon="el-icon-plus"
            size="mini"
            @click="onAddMain
            "
            >增加
          </el-button>
        </div>
        <el-table
          :data="formline.mainHandlers"
          style="width: 100%"
          border
          class="primary-table"
        >
          <el-table-column prop="name" label="姓名" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="formline.mainHandlers[scope.$index].name"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="jobTitle" label="关联账号" align="center">
            <template slot-scope="scope">
              <el-select
                class="w300"
                clearable
                v-model="formline.mainHandlers[scope.$index].handlerId"
                placeholder="请选择关联账号"
                @change="onMainHandlerChange($event, scope.$index)"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="action"
            label="操作"
            align="center"
            width="100"
          >
            <template slot-scope="{ $index }">
              <el-button
                type="text"
                icon="el-icon-delete"
                @click="formline.mainHandlers.splice($index, 1)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="案件负责人" prop="sourcePerson">
        <el-select
          class="w300"
          v-model="formline.handlerInfo.sourcePersonId"
          placeholder="请选择"
          @change="changesourcePerson"
        >
          <el-option
            v-for="item in userList"
            :key="item.userId"
            :label="item.userName"
            :value="item.userId"
          >
          </el-option>
        </el-select>

        <!-- <el-button>选</el-button> -->
      </el-form-item>
      <!-- <el-form-item label="办案人员" prop="handlers">
        <div class="type2-title left">
          <el-button icon="el-icon-plus" size="mini" @click="onadd(4)"
            >增加
          </el-button>
        </div>
        <el-table
          :data="formline.handlerInfo.handlers"
          style="width: 100%"
          border
          class="primary-table"
        >
          <el-table-column prop="jobTitle" label="职务" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="formline.handlerInfo.handlers[scope.$index].jobTitle"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="人员" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="formline.handlerInfo.handlers[scope.$index].name"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item> -->
      <el-form-item label="案件联系人">
        <div class="type2-title left">
          <el-button icon="el-icon-plus" size="mini" @click="onadd(5)"
            >新增
          </el-button>
          <el-button icon="el-icon-delete" size="mini" @click="onclear(1)"
            >清空
          </el-button>
        </div>
        <el-table
          :data="formline.handlerInfo.linkmen"
          style="width: 100%"
          border
          class="primary-table"
        >
          <el-table-column prop="type" label="类型" align="center" width="180">
            <template slot-scope="scope">
              <el-input
                v-model="formline.handlerInfo.linkmen[scope.$index].type"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="联系人"
            align="center"
            width="180"
          >
            <template slot-scope="scope">
              <el-input
                v-model="formline.handlerInfo.linkmen[scope.$index].name"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="联系电话" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="formline.handlerInfo.linkmen[scope.$index].mobile"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="email" label="邮箱" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="formline.handlerInfo.linkmen[scope.$index].email"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="formline.handlerInfo.linkmen[scope.$index].remark"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item label="合同文档">
        <div class="type2-title left flex-title">
          <!-- <el-button icon="el-icon-plus" size="mini" @click="onadd(6)"
            >上传</el-button
          > -->
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :on-preview="handlePreview"
            multiple
            :show-file-list="false"
            :on-success="successUpload"
            :on-error="errUpload"
            :headers="headers"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <el-button size="small" @click="dowlonfile" class="dowon-btn"
            ><i class="el-icon-download"></i>下载模板
          </el-button>
        </div>
        <el-table
          :data="formline.contractInfo.attachments"
          style="width: 100%"
          border
          class="primary-table"
        >
          <el-table-column
            prop="filename"
            label="文档"
            align="center"
            width="180"
          />
          <el-table-column
            prop="mimeType"
            label="*类型"
            align="center"
            width="180"
          >
            <template slot-scope="scope">
              <el-select
                v-model="
                  formline.contractInfo.attachments[scope.$index].mimeType
                "
                filterable
                class="maxWidth"
                placeholder="选择或填写受理机构"
              >
                <el-option label="合同草稿" value="合同草稿" />
                <el-option label="正式合同" value="正式合同" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="formline.contractInfo.attachments[scope.$index].remark"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="size" label="大小" align="center" />
          <el-table-column prop="createTime" label="上传日期" align="center" />
        </el-table>
      </el-form-item>
      <div class="devform-title">开票信息</div>
      <el-form-item label="纳税识别号" class="w2" prop="taxId">
        <el-input
          v-model="formline.invoiceInfo.taxId"
          class="maxWidth"
        ></el-input>
      </el-form-item>
      <el-form-item label="企业名称" class="w2" prop="taxCompany">
        <el-input
          v-model="formline.invoiceInfo.taxCompany"
          class="maxWidth"
        ></el-input>
      </el-form-item>
      <el-form-item label="企业地址" class="taxAddress">
        <el-input
          v-model="formline.invoiceInfo.taxAddress"
          class="maxWidth"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系电话" class="taxTel">
        <el-input
          v-model="formline.invoiceInfo.taxTel"
          class="maxWidth"
        ></el-input>
      </el-form-item>
      <el-form-item label="开户行" class="w2" prop="bankName">
        <el-input
          v-model="formline.invoiceInfo.bankName"
          class="maxWidth"
        ></el-input>
      </el-form-item>
      <el-form-item label="开户行账号" class="w2" prop="bankAccount">
        <el-input
          v-model="formline.invoiceInfo.bankAccount"
          class="maxWidth"
        ></el-input>
      </el-form-item>
      <div class="devform-title">审核人员</div>
      <el-form-item label="审核人员" class="taxAddress" prop="reviewers">
        <el-select
          multiple
          v-model="formline.reviewers"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in userList"
            :key="item.userId"
            :label="item.userName"
            :value="item.userId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="抄送" class="taxAddress">
        <el-select
          multiple
          v-model="formline.makeList"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in userList"
            :key="item.userId"
            :label="item.userName"
            :value="item.userId"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="step3-foot">
      <el-button @click="back" type="warning" v-if="$route.query.type != 'edit'"
        >上一步
      </el-button>
      <el-button @click="onsubmit" type="primary">提交</el-button>
      <el-button @click="oncanle">取消</el-button>
    </div>
    <customerModalVue ref="customerModalVue" @submit="submitCusmoer" />
    <dowlonFileModal ref="dowlonFileModal" />
  </div>
</template>

<script>
import { caseadd, casedetail, parties } from "@/api/case/case";
import { listDept } from "@/api/system/dept";
import moment from "moment";
import customerModalVue from "./customerModal.vue";
import { getToken } from "@/utils/auth";
import dowlonFileModal from "./dowlonFileModal.vue";
import { getAllUser } from "@/api/met";
import { defaultList } from "@/api/case/case";
export default {
  dicts: [
    "proxy_agent_permission",
    "proxy_procedure",
    "case_source",
    "case_source2",
    "payment_type",
    "sys_accept_org_name",
    "case_source_attack",
    "case_source_defend",
    "case_source_other",
    "sys_proxy_procedure_1",
    "proxy_agent_permission_1",
    "sys_consultant_grade",
    "module_type",
    "sys_carage_type",
    "sys_carage_type_1",
    "sys_carage_type_2",
    "sys_carage_type_3",
    "sys_carage_type_4",
    "sys_carage_type_6",
    "sys_carage_type_9",
    "sys_carage_type_10",
    "sys_carage_type_10_hasson_1",
    "sys_carage_type_6_1_hasson",
    "sys_carage_type_11",
    "sys_carage_type_6_2",
    "sys_carage_type_6_4",
    "sys_carage_type_10_2",
    "sys_carage_type_1_2", // 民事诉讼-债权
    "sys_carage_type_1_3", // 民事诉讼-知识产权纠纷
    "sys_carage_type_1_4", // 民事诉讼-婚姻家庭纠纷
    "sys_carage_type_1_5", // 民事诉讼-商事纠纷
  ],
  components: { customerModalVue, dowlonFileModal },
  data() {
    let phone = (rule, value, callback) => {
      const regex = /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/;
      if (value && !regex.test(value)) {
        return callback(new Error("电话格式不正确"));
      }
    };
    let paymentvaild = (rule, value, callback) => {
      if (!this.formline.costInfo.paymentType) {
        callback(new Error("请选择收费方式！"));
      } else {
        callback();
      }
    };

    let fixedCostsvaild = (rule, value, callback) => {
      // if (!this.formline.costInfo.fixedCosts) {
      //   callback(new Error("请输入固定收费金额！"));
      // } else {
      callback();
      // }
    };
    let acceptOrgName = (rule, value, callback) => {
      if (!this.formline.suitInfo.acceptOrgName) {
        callback(new Error("请输入受理机构"));
      } else {
        callback();
      }
    };
    let taxIdvaild = (rule, value, callback) => {
      if (!this.formline.invoiceInfo.taxId) {
        callback(new Error("请输入纳税识别号"));
      } else {
        callback();
      }
    };
    return {
      headers: { Authorization: "Bearer " + getToken() },
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      // headers: {
      //   Authorization: "Bearer " + getToken(),
      // },
      userList: [],
      test: "1",
      copyFormline: {},
      formline: {
        makeList: [], // 抄送给
        caseName: "",
        paymentType: "",
        caseSource: "",
        defendant: "", //被告人
        mandatorRelationship: "", //xxx关系
        agentProgram: "", // 代理程序
        reviewers: [],
        mainHandlers: [
          {
            handlerId: this.$store.state.user.id,
            name: this.$store.state.user.name,
          }
        ],
        partiesInfo: {
          clientParties: [], //委托方当事人
          otherParties: [], //其他当事人
          targetParties: [], //对方当事人
        },
        contractInfo: { attachments: [] },
        handlerInfo: {
          handlers: [], //办案人员
          linkmen: [], //常见联系人
          sourcePerson: "", //案件负责人
          sourcePersonId: "",
        },

        receiptDate: "",
        customerId: "",
        belongOrgId: "",
        agent: "",
        summary: "",
        taxAddress: "",
        costInfo: {
          costsRemark: "", //收费备注
          estimatedReceiptDate: "", //预计到款日期
          fixedCosts: "", //固定收费金额	string
          paymentType: "", //支付方式
          subjectAmount: "", //标的额
          subjectAttachments: [], //标的证明文件
          subjectDescription: "", //标的说明
          travelCosts: "", //差旅费
        },
        invoiceInfo: {
          bankAccount: "", //开户行账号
          bankName: "", //开户行
          taxAddress: "", //企业地址
          taxCompany: "", //企业名称
          taxId: "", //纳税识别号
          taxTel: "", //联系电话
        },
        suitInfo: {
          acceptOrgId: "", //受理机构ID
          acceptOrgName: "", //受理机构
          acceptOrgNo: "", //受理机构案号
          adjudicator: "", //审理人
          courtSessionTime: "", //开庭时间
          detainLocation: "", //羁押场所
          proxyAgentPermissions: [], //委托代理权限(proxy_agent_permission)
          proxyProcedure: [], //代理程序(
          consultantEndTime: "", //顾问结束时间
          consultantStartTime: "", //顾问开始时间
          consultantGrade: "", //顾问等级
        },
        note: "",
      },
      belongOrg: [], //部门
      rules: {
        receiptDate: [
          { required: true, message: "请选择收案日期", trigger: "change" },
        ],
        belongOrgId: [
          { required: true, message: "请选择所属分所", trigger: "change" },
        ],
        customerId: [
          { required: true, message: "请输入客户", trigger: "change" },
        ],
        // agent: [{ required: true, message: "请输入委托人", trigger: "change" }],
        reviewers: [
          { required: true, message: "请选择审核人员", trigger: "change" },
        ],

        fixedCosts: [
          { validator: fixedCostsvaild, trigger: "change", required: true },
        ],
        paymentType: [
          { validator: paymentvaild, trigger: "change", required: true },
        ],
        // taxId: [{ validator: taxIdvaild, trigger: "change", required: true }],
        acceptOrgName: [
          { validator: acceptOrgName, trigger: "change", required: true },
        ],
        taxAddress: [
          { required: true, message: "请输入企业地址", trigger: "change" },
        ],
        "suitInfo.consultantStartTime": [
          { required: true, message: "请选择顾问开始时间", trigger: "change" },
        ],
        "suitInfo.consultantEndTime": [
          { required: true, message: "请选择顾问结束时间", trigger: "change" },
        ],
      },
    };
  },
  props: {
    param: {
      type: Object,
      require: () => {},
    },
    id: {
      type: String,
      require: "",
    },
  },
  watch: {
    props(newvalue) {
      console.log(newvalue, "newvalue");
      // this.formline.agent = newvalue;
    },
  },
  updated() {
    if (this.param.customerName && !this.formline.agent)
      this.formline.agent = this.param.customerName;
  },
  created() {
    this.getData();
    this.getAllUser();
    if (this.$route.query.type != 'edit') {
      defaultList({ type: 2 }).then(res => {
        this.formline.reviewers = res.data.map(v => v.userId)
      })
    }
  },
  computed: {
    proxyProcedurearry() {
      let param = this.param.categoryId || this.formline.categoryId;
      if (param == "sys_carage_type_2") {
        return "proxy_procedure";
      } else if (
        [
          "sys_carage_type_1",

          "sys_carage_type_3",
          "sys_carage_type_5",
          "sys_carage_type_10",
        ].includes(param)
      ) {
        return "sys_proxy_procedure_1";
      } else {
        return null;
      }
    },
    proxyAgentPermissionsarray() {
      //为任意代理权限
      let param = this.param.categoryId || this.formline.categoryId;
      if (param == "sys_carage_type_2") {
        return "proxy_agent_permission";
      } else if (
        [
          "sys_carage_type_1",
          "sys_carage_type_3",
          "sys_carage_type_5",
          "sys_carage_type_9",
          "sys_carage_type_10",
        ].includes(param)
      ) {
        return "proxy_agent_permission_1";
      } else {
        return null;
      }
    },
  },
  methods: {
    onAddMain () {
      if (!this.formline.mainHandlers) {
        this.formline.mainHandlers  = []
      }
      this.formline.mainHandlers.push({ handlerId: '', name: '' })
    },
    //删除案件当事人表格行
    ondel(index, name) {
      this.formline.partiesInfo[name].splice(index, 1);
    },
    changesourcePerson(e) {
      let val = this.userList.filter((item) => {
        return item.userId == e;
      });
      this.formline.handlerInfo.sourcePerson = val[0].userName;
    },
    onMainHandlerChange(e, $index) {
      console.log("on main handler change", e, $index);
      let val = this.userList.filter((item) => {
        return item.userId == e;
      });
      this.formline.mainHandlers[$index].name = val[0].userName;
    },
    getAllUser() {
      getAllUser().then((res) => {
        this.userList = res.data;
      });
    },
    //下载合同模板
    dowlonfile() {
      this.$refs.dowlonFileModal.open();
    },
    getData() {
      //获取所属分所

      listDept().then((res) => {
        console.log(res);
        this.belongOrg = res.data.filter((item) => {
          return item.ancestors?.split(",")?.length == 2;
        });
      });
    },
    iserr(num) {
      const phoneRegex = /^1[3-9]\d{9}$/; // 用于匹配中国大陆的手机号码
      const telRegex = /^(0[0-9]{2,3}-)?([2-9][0-9]{6,7})+(-[0-9]{1,4})?$/; // 用于匹配中国大陆的固定电话号码
      if (num && !(phoneRegex.test(num) || telRegex.test(num))) {
        return true;
      } else {
        return false;
      }
    },
    getDetail() {
      //编辑获取详情
      console.log("this.id", this.id);
      casedetail(this.id).then((res) => {
        console.log(res.data);
        let object = Object.assign({}, this.formline, res.data);
        this.$set(this, "formline", res.data);
        console.log(object, this.formline, res.data);
        console.log(this.formline);
        this.formline.suitInfo.proxyAgentPermissions = res.data.suitInfo
          .proxyAgentPermissions
          ? res.data.suitInfo.proxyAgentPermissions.split(",")
          : [];
        this.formline.suitInfo.proxyProcedure = res.data.suitInfo.proxyProcedure
          ? res.data.suitInfo.proxyProcedure.split(",")
          : [];
        this.formline.partiesInfo.targetParties.map(
          (item) => (item.type = String(item.type))
        );
        this.formline.partiesInfo.otherParties.map(
          (item) => (item.type = String(item.type))
        );
        this.formline.partiesInfo.clientParties.map(
          (item) => (item.type = String(item.type))
        );
        this.copyFormline = JSON.parse(JSON.stringify(this.formline))

      });
    },
    onCheckChange () {
      let formLine = JSON.parse(JSON.stringify(this.formline))
      this.$delete(this.copyFormline, 'partiesInfo') // 申请人
      // this.$delete(this.copyFormline, 'targetParties') // 对方当事人
      // this.$delete(this.copyFormline, 'otherParties') // 其他当事人

      this.$delete(formLine, 'partiesInfo')
      // this.$delete(formLine, 'targetParties')
      // this.$delete(formLine, 'otherParties')
      return JSON.stringify(formLine) === JSON.stringify(this.copyFormline)
    },
    //委托人选择
    submitCusmoer(val) {
      this.formline.agent = val.customerName;
    },
    onchose(refname) {
      this.$refs[refname].open();
    },
    handlePreview(val) {
      //点击文件
      console.log("上传", val);
    },
    successubjectAttachments(response, file, fileList) {
      //标的额证明文件
      console.log("上传成功", response, file, fileList);
      if (response.code == 200) {
        this.formline.costInfo.subjectAttachments.push({
          filename: response.originalFilename,
          size: file.size,
          remark: "",
          createTime: moment().format("yyyy-MM-DD HH:mm:ss"),
          url: response.url,
          mimeType: file.name.split(".")[1],
        });
      } else {
        this.$message.error(response.msg);
      }
    },
    errUpload() {
      console.log("上传失败了");
    },
    successUpload(response, file, fileList) {
      //合同上传成功
      console.log("上传成功", response, file, fileList);
      if (response.code == 200) {
        this.formline.contractInfo.attachments.push({
          filename: response.originalFilename,
          size: file.size,
          remark: "",
          createTime: moment().format("yyyy-MM-DD HH:mm:ss"),
          url: response.url,
          mimeType: "",
        });
      } else {
        this.$message.error(response.msg);
      }
    },
    onadd(type) {
      if (type == 1) {
        console.log("--");
        this.formline.partiesInfo.clientParties.push({
          type: "",
          agentName: "",
          mark: "",
          mobile: "",
        });
      } else if (type == 2) {
        this.formline.partiesInfo.targetParties.push({
          agentName: "",
          type: "",
          mark: "",
          mobile: "",
        });
      } else if (type == 3) {
        this.formline.partiesInfo.otherParties.push({
          agentName: "",
          type: "",
          mark: "",
          mobile: "",
        });
      } else if (type == 4) {
        this.formline.handlerInfo.handlers.push({
          jobTitle: "",
          name: "",
        });
      } else if (type == 5) {
        this.formline.handlerInfo.linkmen.push({
          email: "",
          mobile: "",
          name: "",
          remark: "",
          type: "",
        });
      }
    },
    //确定
    onsubmit() {
      let status = false;
      if (!this.formline.partiesInfo.clientParties[0]?.agentName) {
        return this.$message.error("请输入申请人");
      }
      if (!this.formline.partiesInfo.targetParties[0]?.agentName) {
        return this.$message.error("请输入对方当事人");
      }
      if (this.formline.contractInfo?.attachments?.length !== 0) {
        this.formline.contractInfo.attachments.map((item) => {
          if (!item.mimeType) {
            status = true;
          }
        });
      }
      if (status) {
        this.$message.warning("合同类型不能为空！");
        return;
      }

      this.$refs.formline.validate((valid) => {
        if (valid) {
          let noChange =this.$route.query.auditStatus == 1 && this.onCheckChange()
          if (noChange) {
            return this.onSaveParties()
          }
          this.$emit("submit", this.formline);
        } else {
          console.log("error submit!!");
          this.$message.warning("请现将数据填写完整！");
          return false;
        }
      });
    },
    onSaveParties () {
      let {
        partiesInfo: {
          clientParties,
          targetParties,
          otherParties,
        },
        id,
      } = this.formline

      parties({
        clientParties,
        targetParties,
        otherParties,
        id
      }).then(res => {
        this.$message.success("保存成功")
        this.$router.back()
      })
    },
    //取消
    oncanle() {
      this.$refs.formline.resetFields();
      this.$router.back(); //关闭当前页签
    },
    //上一步
    back() {
      this.$emit("back");
    },
  },
};
</script>

<style lang="scss" scoped>
.maxWidth {
  max-width: 600px;
}

.step3 {
  max-width: 1200px;
  display: flex;
  justify-content: center;
  padding: 20px;

  &-foot {
    text-align: center;
    margin-top: 30px;
  }

  .w300 {
    width: 300px;
  }

  .m30 {
    margin-left: 30px;
  }

  .col {
    padding: 5px 3px 13px 3px;
    background-color: $--color-labelbg;
  }
}

.step3-foot {
  position: fixed;
  bottom: 20px;
  width: calc(100% - 20px);
  max-width: 1200px;
  background: white;
  text-align: center;
  padding: 20px;
  z-index: 100;
}

.dev-form {
  // height: calc(100vh - 320px);
  // overflow: auto;
  padding-bottom: 60px;
}

::v-deep .el-input--medium .el-input__inner {
  height: 32px;
  line-height: 32px;
}

::v-deep .dev-form .el-form-item__error {
  bottom: 1px;
  top: auto;
  left: 10px;
}

::v-deep .dev-form .el-form-item__content {
  padding-bottom: 13px;
}

::v-deep .el-input-number--medium .el-input-number__increase,
.el-input-number--medium .el-input-number__decrease {
  height: 30px;
  top: 2px;
}

::v-ddeep .el-input.el-input--medium.el-input--suffix {
  min-width: 140px !important;
}

::v-deep .el-select.el-select--medium {
  width: 100%;
}

::v-deep span.el-input-number__decrease {
  height: 30px;
  top: 2px;
}

::v-deep.el-input.el-input--medium.error-phone::after {
  content: "联系方式不正确！";
  position: absolute;
  bottom: -23px;
  width: 100%;
  left: 11px;
  font-size: 11px;
  color: #ff4949;
}

::v-deep .dev-form .el-form-item__label {
  flex-shrink: 0;
}

::v-deep .dev-form .el-form-item__content {
  width: 0;
  flex: 1;
}

.dowon-btn {
  height: 33px;
  position: relative;
  top: 2px;
  margin-left: 10px;
}

.inline-block {
  display: inline-block;
}

.flex-title {
  display: flex;
}
</style>
